<template>
  <p>点击选中激活项</p>
  <p>change 事件监听激活后的筛选数据</p>
  <MerakStatCard
    v-model="state.statValue"
    :data="state.statData"
    @change="
      params => {
        console.log(params);
      }
    "
  />

  <dropWrap key="oreo">
    <pre><code class="language-js">{{ html }} </code></pre>
  </dropWrap>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";

import MerakStatCard, { MerakStatDataType } from "../../../../components/MerakStatCard";

import dropWrap from "../dropWrap.vue";

import Prism from "prismjs";

const html = ref(`
<template>
  <MerakStatCard
    v-model="state.statValue"
    :data="state.statData"
    @change="
      params => {
        console.log(params);
      }
    "
  />
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

import MerakStatCard, { MerakStatDataType } from "../../../../components/MerakStatCard";

const state = reactive<{
  statValue: string;
  statData: MerakStatDataType[][];
}>({
  statValue: "",
  statData: []
});

const queryStatData = () => {
  // 获取数据，组件接收指定数据，key 为指定的翻译 key
  state.statData = [
    [
      {
        key: "job",
        label: "在职",
        value: "383",
        search_key: "status",
        search_val: "1"
      },
      {
        key: "full_time",
        label: "全职",
        value: "378",
        search_key: "job_nature",
        search_val: "1,0"
      },
      {
        key: "intern",
        label: "实习生",
        value: "1",
        search_key: "job_nature",
        search_val: "1,1"
      }
    ],
    [
      {
        key: "leave_the_job",
        label: "试用期",
        value: "64",
        search_key: "status",
        search_val: "0"
      },
      {
        key: "probation_period",
        label: "待离职",
        value: "115",
        search_key: "status",
        search_val: "3"
      }
    ]
  ];
  // 如需默认激活某个筛选项需指定
  state.statValue = state.statData[0][0].key
};

onMounted(() => queryStatData());
<\/script>
`);

const state = reactive<{
  statValue: string;
  statData: MerakStatDataType[][];
}>({
  statValue: "",
  statData: []
});

const queryStatData = () => {
  // 获取数据，组件接收指定数据，key 为指定的翻译 key
  state.statData = [
    [
      {
        key: "job",
        label: "在职",
        value: "383",
        search_key: "status",
        search_val: "1"
      },
      {
        key: "full_time",
        label: "全职",
        value: "378",
        search_key: "job_nature",
        search_val: "1,0"
      },
      {
        key: "intern",
        label: "实习生",
        value: "1",
        search_key: "job_nature",
        search_val: "1,1"
      }
    ],
    [
      {
        key: "leave_the_job",
        label: "试用期",
        value: "64",
        search_key: "status",
        search_val: "0"
      },
      {
        key: "probation_period",
        label: "待离职",
        value: "115",
        search_key: "status",
        search_val: "3"
      }
    ]
  ];
  // 如需默认激活某个筛选项需指定
  state.statValue = state.statData[0][0].key;
};

onMounted(() => queryStatData());

nextTick(() => {
  Prism.highlightAll();
});
</script>
